<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="数据来源">
                <a-select v-model="pageFilter.dataSource" allowClear placeholder="请选择" style="width:100%;">
                  <a-select-option v-for="(item, key) in sourceArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="封堵地址">
                <a-input v-model="pageFilter.fraudUrl" placeholder="请输入涉诈地址、域名、ip" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="提交时间">
                <a-range-picker v-model="pageFilter.rvTime" allowClear style="width:100%;" format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD" @change="onTimeChange" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="onAdd(1)">新增</a-button>
        <!-- <a-button @click="onInport()">导入</a-button> -->
        <a-button type="primary" @click="handleModal()" ghost v-if=" this.type != 'Details'">导入</a-button>
        <!-- <j-upload v-model="pageFilter.file" style="display: inline-block;" text="导入"/> -->
        <!-- <a-button type="primary" v-if="pageFilter.file" ghost @click="onInport()">确认导入</a-button> -->
        <a-button @click="onTempple()">下载模板</a-button>
        <a-button type="danger" @click="onDelete()" ghost>删除</a-button>
        <!-- <j-upload v-model="pageFilter.file" style="display: inline-block;" v-if="upload"/> -->
        
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="id" :showAlert="false" :expandIconColumnIndex="1" :showSelection="true"
          :loading="loading" :columns="columns" :dataSource="pageData" @change="onTableChange"
          @selectedRowKey="onSelectedRow">
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onAdd(2, record)" type="link" style="padding: 0">编辑</a-button>
            <a-divider type="vertical" />
            <a-button @click="onDelete(record)" type="link" style="padding: 0">删除</a-button>
          </template>
        </z-table>
      </div>
      <AddModal ref="addModalId" :title=title  @ok="onQuery" :label=label />
      <lead-files-modal v-if="leadModalBool" ref="leadModal" :isLoadServerFile="true" :onEnd="handleOk" :noShow="'a'"/>
    </a-card>
  </div>
</template>

<script>
// import * as interviewApi from '@/api/sjsk/help/interview.js'
import AddModal from './modules/WhiteAddModal'
import { downLoadMix } from '@/utils/export-util/util'
import { pageBlockingWhiteList,importBlockingWhiteList,
  exportBlockingWhiteList,delBlockingWhiteList} from '@/api/plugging/Police'
import leadFilesModal from '@/components/zxd/upload/draggerUploadFiles'
export default {
  // watch: {
  //   'pageFilter.file':{
  //     handler(val){
  //       if(!val){
  //         this.upload = false
  //       }
  //     }
  //   }
  // },
  components: {
    AddModal,
    leadFilesModal,
  },
  data() {
    return {
      leadModalBool: false,
      // upload:false,
      idsDTO:{
        ids:[]
      },
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      loading: false,
      visible: false,
      reloading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      isDisabled: true,
      sourceArr: [
        { title: "全部", value: 0, },
        { title: "人工登记", value: 1, },
        { title: "误封堵申诉", value: 2, }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
              return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '白名单地址',
          dataIndex: 'fraudUrl',
        },
        {
          title: '数据来源',
          dataIndex: 'dataSource',
          // width: '12%',
          customRender:text => `${text == 1?'人工登记':'误封堵申诉'}`
        },
        {
          title: '提交时间',
          dataIndex: 'submitTime',
          // width: '30%',
        },
        {
          title: '提交人',
          dataIndex: 'updateName',
          // width: '30%',
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData: {},
      title: "",
      label:''
    }
  },
  created() {

  },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.isDisabled = keys.length > 0 ? false : true;
      this.idsDTO.ids = keys
      console.log(this.idsDTO);
    },
    onTimeChange(date) {
      this.$set(this.pageFilter, 'startRvDate', date[0])
      this.$set(this.pageFilter, 'endRvDate', date[1])
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      pageBlockingWhiteList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    onAdd(type, record) {
      if (type == 1) {
        this.title = "新增白名单"
        this.label = '白名单地址'
      } else {
        this.title = "编辑封堵地址"
        this.label = '封堵地址'
      }
      this.$refs.addModalId.show(type, record)
    },
    // onInport() {
    //   importBlockingWhiteList(this.pageFilter.file).then( res => {
    //             if (res.success) {
    //               this.$message.success(res.message)
    //               this.onQuery()
    //               this.pageFilter.file = ''
    //             } else {
    //               this.$message.success(res.message)
    //               this.loading = false
    //             }
    //             })
    //             .catch((e) => {
    //               this.loading = false
    //               this.$message.warn('请求失败！')
    //             })
    // },
    onTempple() {
      exportBlockingWhiteList().then( 
        async res => {
            if(res && res.size>0) {
              const fileName = '封堵白名单表.xls'
              await downLoadMix(res, fileName)
            } else {
              this.$message.warn("导出失败！")
            }
      })
                .catch((e) => {
                  this.loading = false
                  this.$message.warn('请求失败！')
                })
    },
    onDelete(record) {
      let ids = this.idsDTO
      if(record){
        ids.ids.push(record.id)
      }
          let doDelete = () => {
            delBlockingWhiteList(ids).then( res => {
                if (res.success) {
                  this.$message.success(res.message)
                  this.onQuery()
                  this.$refs.table.onClearRowKeys()
                } else {
                  this.$message.success(res.message)
                  this.loading = false
                }
                })
                .catch((e) => {
                  this.loading = false
                  this.$message.warn('请求失败！')
                })
          }
      this.$confirm({
        title: `你确定要删除此访谈分类吗？`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          doDelete()
        }
      });
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    // 导入操作
    handleOk(formData) {
      this.$refs.leadModal.loading=true
      importBlockingWhiteList(formData)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.leadModalBool = false
            this.onQuery()
          } else {
            this.$refs.leadModal.loading = false
            this.$error({
              title: '提示',
              content: h => <span domPropsInnerHTML={res.message} />
            })
          }
        })
        .catch((e) => {
          this.$refs.leadModal.loading = false
          this.$message.error('导入出错了')
        })
    },
    handleModal() {
      this.leadModalBool = true
      this.$nextTick(()=>{
        this.$refs.leadModal.visible=true
      })
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  position: absolute;
  left: 30%;
  top: 0;
  z-index: 120;
}

/deep/.ant-card-body {
  padding: 15px 24px;
}

/deep/.ant-row {
  margin-bottom: 0
}

/deep/.ant-col-2 {
  width: 5.8% !important;
}
</style>
